<template>
  <el-form ref="form" size="mini" label-width="80px">
    <el-card class="box-card editor-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>{{ control.label }}</span>
      </div>
      <el-form-item label="宽度">
        <el-select
          placeholder="请选择"
          style="width: 100%"
          default-first-option
          v-model="control.span"
        >
          <el-option
            v-for="item in [6, 8, 12, 16, 18, 24]"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="字段">
        <el-input v-model="control.field"></el-input>
      </el-form-item>
      <el-form-item label="字段名称">
        <el-input v-model="control.label"></el-input>
      </el-form-item>
      <el-form-item label="字段类型">
        <el-select
          placeholder="请选择"
          style="width: 100%"
          default-first-option
          v-model="control.type"
          @change="(val) => fieldTypeChange(control, val)"
        >
          <el-option
            v-for="item in fieldTypes"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 勾选，下拉 才有 -->
      <el-form-item label="选项" v-if="hasOptions(control.type)">
        <div
          v-for="(option, optionIndex) in control.options"
          :key="optionIndex"
        >
          <el-col :span="2">
            <el-button
              size="mini"
              type="text"
              @click="removeNormalOptions(control.options, optionIndex)"
              ><i class="el-icon-minus"></i
            ></el-button>
          </el-col>
          <el-col :span="11">
            <el-form-item label="" label-width="10px">
              <el-input v-model="option.label" placeholder="label"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="" label-width="10px">
              <el-input v-model="option.value" placeholder="value"></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-button size="mini" type="text" @click="addNormalOptions(control)"
          ><i class="el-icon-plus"></i
        ></el-button>
      </el-form-item>

      <el-form-item label="默认值" v-if="control.type != 'table'">
        <formItem
          :control="control"
          v-model="control.default"
          @change="defaultChange"
          :isEdit="true"
        ></formItem>
        <!-- 针对下拉和多选的默认值 -->
      </el-form-item>

      <!-- 表格专用 -->
      <el-form-item label="属性" v-if="control.type == 'table'">
        <el-card
          class="property-card"
          shadow="never"
          v-for="(tbcontrol, tboptionIndex) in control.options"
          :key="tboptionIndex"
        >
          <el-button
            size="mini"
            type="text"
            @click="removeTableProperty(control.options, tboptionIndex)"
            >移除属性</el-button>
          <el-form-item label="字段">
            <el-input v-model="tbcontrol.field"></el-input>
          </el-form-item>
          <el-form-item label="字段名称">
            <el-input v-model="tbcontrol.label"></el-input>
          </el-form-item>
          <el-form-item label="字段类型">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              default-first-option
              v-model="tbcontrol.type"
              @change="(val) => fieldTypeChange(tbcontrol, val)"
            >
              <el-option
                v-for="item in fieldTypesWithoutTable"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 勾选，下拉 才有 -->
          <el-form-item label="选项" v-if="hasOptions(tbcontrol.type)">
            <div
              v-for="(option, optionIndex) in tbcontrol.options"
              :key="optionIndex"
            >
              <el-col :span="2">
                <el-button
                  size="mini"
                  type="text"
                  @click="removeNormalOptions(tbcontrol.options, optionIndex)"
                  ><i class="el-icon-minus"></i
                ></el-button>
              </el-col>
              <el-col :span="11">
                <el-form-item label="" label-width="10px">
                  <el-input
                    v-model="option.label"
                    placeholder="label"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="" label-width="10px">
                  <el-input
                    v-model="option.value"
                    placeholder="value"
                  ></el-input>
                </el-form-item>
              </el-col>
            </div>
            <el-button
              size="mini"
              type="text"
              @click="addNormalOptions(tbcontrol)"
              ><i class="el-icon-plus"></i
            ></el-button>
          </el-form-item>

          <el-form-item label="默认值">
            <formItem
              :control="tbcontrol"
              v-model="tbcontrol.default"
              :isEdit="true"
            ></formItem>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="tbcontrol.width"></el-input>
          </el-form-item>
        </el-card>
        <el-button size="mini" type="text" @click="addTableProperty(control)"
          >添加属性</el-button
        >
      </el-form-item>

      <!-- <el-form-item label="顺序">
        <el-input
          type="number"
          disabled
          v-model="control.order"
          placeholder="value"
        ></el-input>
      </el-form-item> -->
    </el-card>
  </el-form>
</template>

<script>
import formItem from "./formItem";
export default {
  components: { formItem },
  name: "crleditor",
  props: {
    control: {
      type: Object,
    },
  },
  watch: {
    control: {
      deep: true,
      handler() {
        this.$emit("change", this.control);
      },
    },
  },
  computed: {
    fieldTypesWithoutTable() {
      return this.fieldTypes.filter((f) => f != "table");
    },
  },
  data() {
    return {
      fieldTypes: [
        "string",
        "textarea",
        "number",
        "checkbox",
        "radio",
        "select",
        "multipleselect",
        "table",
        "date",
        "time",
        "datetime",
      ],
    };
  },
  mounted() {},
  methods: {
    hasOptions(fieldType) {
      return (
        ["checkbox", "radio", "select", "multipleselect"].indexOf(fieldType) >
        -1
      );
    },
    checkOptions(control) {
      if (!control.options || !control.options instanceof Array) {
        this.$set(control, "options", []);
      }
    },
    addNormalOptions(control) {
      this.checkOptions(control);
      control.options.push({ label: "label", value: "value" });
    },
    removeNormalOptions(arr, index) {
      arr.splice(index, 1);
    },
    addTableProperty(control) {
      this.checkOptions(control);
      control.options.push({
        type: "string",
        field: "field" + new Date().getTime(),
        label: "label" + new Date().getTime(),
        width: "180",
        default: "",
      });
    },
    removeTableProperty(arr, index) {
      arr.splice(index, 1);
    },
    fieldTypeChange(control, fieldType) {
      if (["checkbox", "multipleselect"].indexOf(fieldType) > -1) {
        this.checkOptions(control);
        this.$set(control, "default", []);
      } else if ("container" == fieldType) {
        this.$set(control, "default", {});
      } else {
        this.$set(control, "default", "");
      }
    },
    defaultChange(nv) {
      this.$emit("default-change", nv);
    },
  },
};
</script>

<style>
.box-card {
  margin-bottom: 10px;
}
.editor-card .el-card__body {
  padding: 0px;
}
.property-card {
  margin-bottom: 5px;
}
</style>